<template>
  <div>
<van-search  placeholder="请输入搜索关键词" />
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item>1</van-swipe-item>
  <van-swipe-item>2</van-swipe-item>
  <van-swipe-item>3</van-swipe-item>
  <van-swipe-item>4</van-swipe-item>
</van-swipe>
<router-view></router-view>
<van-tabs v-model="active" @change="btn">
<input v-model="sc" @change="shou" />
  <van-tab v-for="(item,index) in list" :key="index" :title="item.name" >
    <p v-for="(val,i) in listArr" :key="i">
      <img :src="val.img" />
      <span>{{val.name}}</span>
      <button @click="add(val.id)">删除</button><button @click="showbj(val.id)">编辑</button>
    </p>
  </van-tab>

</van-tabs>
<div id="zz" v-show="show">
  <div id="tc">
    名称修改:<input v-model="inp" />
    <br>
    <button @click="xg">确认</button>
  </div>
</div>
<van-tabbar v-model="active2">
  <van-tabbar-item icon="home-o">
  <router-link to="/home/page">首页</router-link>
  </van-tabbar-item>
  <van-tabbar-item icon="search">
  <router-link to="/home/class">分类</router-link>
  </van-tabbar-item>
  <van-tabbar-item icon="friends-o">
  <router-link to="/home/shop">购物</router-link>
  </van-tabbar-item>
  <van-tabbar-item icon="setting-o">
  <router-link to="/home/my">我的</router-link>
  </van-tabbar-item>
</van-tabbar>
<div>
</div>
  </div>
</template>

<script>
import { Search,Swipe, SwipeItem ,Tab, Tabs, Tabbar, TabbarItem} from 'vant';
import "./Home.css";
import {mapState,mapActions, mapGetters, mapMutations} from "vuex"
export default {
    data() {
    return {
      active: 0,
      active2:0,
      data:[],
      // datalist:[]
        show: false,
        inp:"",
        sc:""
    };
  },
  mounted() {
    
    this.getlist();
  },
  computed:{
    ...mapState(["list","listArr"]),
    ...mapGetters(["getxb","getadd"])
  },
  methods:{
    btn(v){
       this.getxb(v)
    },
    add(id){
      this.getadd(id)
    },
    showbj(id) {
      this.show = true;
      this.setcopyid(id)
    },
    xg(){
        this.setxg(this.inp)
        this.show=false
        this.inp=""
    },
    shou(){
      this.setsc(this.sc)
      this.sc=""
    },  
    ...mapActions(["getlist"]),
    ...mapMutations(["setcopyid","setxg","setsc"])
  }
}
</script>

<style>
#zz{
  width:100%;
  height:100%;
  background: rgba(0, 0, 0, .5);
  position: fixed;
  left: 0;
  top: 0;
}
#tc{
  width:300px;
  height:300px;
  background:#ccc;
  margin:  30px auto;
}
</style>